<template>
	<view class="components-box">
		<view class="back-btn" :style="{top:statusBarHeight+'px',height:navbarHeight}" @click.stop="clickBar">
			<uni-icons :type="barIcon" :size="barSize" :color="barColor" />
		</view>
	</view>
</template>

<script>
	const getVal = (val) => typeof val === 'number' ? val + 'px' : val;
	export default {
		name: "t-bar-back",
		data() {
			return {
				statusBarHeight: 20
			};
		},
		props: {
			barColor: {
				type: String,
				default: "#000"
			},
			barSize: {
				type: Number,
				default: 24
			},
			barIcon: {
				type: String,
				default: "arrowleft"
			},
			height: {
				type: [Number, String],
				default: 44
			}
		},
		computed: {
			navbarHeight() {
				return getVal(this.height)
			},
		},
		mounted() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
		},
		methods: {
			clickBar() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	$nav-height: 44px;

	.components-box {
		position: relative;

		.back-btn {
			display: flex;
			align-items: center;
			position: absolute;
			z-index: 999;
			height: $nav-height;
			width: 80rpx;
			margin-left: 20rpx;
		}
	}
</style>
